<template>
	<view class="container">
		<uni-card :is-shadow="false" is-full>
			<text class="uni-h6">form一般由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。</text>
		</uni-card>
		
		<Section title="表单校验" type="line">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiFormRef" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="姓名" required name="name">
						<uni-easyinput type="text" v-model="valiFormData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="年龄" required name="age">
						<uni-easyinput type="number" v-model="valiFormData.age" placeholder="请输入年龄" />
					</uni-forms-item>
					<uni-forms-item label="自我介绍" name="introduction">
						<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('valiFormRef')">提交</button>
			</view>
		</Section>
		
		<Section title="动态表单" type="line">
			<view class="example">
				<!-- 动态表单校验 -->
				<uni-forms ref="dynamicFormRef" :rules="dynamicRules" :modelValue="dynamicFormData">
					<uni-forms-item label="邮箱" required name="email">
						<uni-easyinput v-model="dynamicFormData.email" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item v-for="(item,index) in dynamicLists" :key="item.id" :label="item.label+' '+index"
						required :rules="item.rules" :name="'domains[' + item.id + ']'">
						<view class="form-item">
							<uni-easyinput v-model="dynamicFormData.domains[item.id]" placeholder="请输入域名" />
							<button class="button" size="mini" type="default" @click="del(item.id)">删除</button>
						</view>
					</uni-forms-item>
				</uni-forms>
				<view class="button-group">
					<button type="primary" size="mini" @click="addFormItem">新增域名</button>
					<button type="primary" size="mini" @click="submit('dynamicFormRef')">提交</button>
				</view>
			</view>
		</Section>
	</view>
</template>

<script setup>
import {ref} from 'vue'

const valiFormRef = ref(null)
const dynamicFormRef = ref(null)
const dynamicLists = ref([])
const valiFormData = ref({
	name: '',
	age: '',
	introduction: '',
})
const dynamicFormData = ref({
	email: '',
	domains: {}
})
const rules =  {
	name: {
		rules: [{required: true, errorMessage: '姓名不能为空'}]
	},
	age: {
		rules: [
			{required: true, errorMessage: '年龄不能为空'}, 
			{format: 'number', errorMessage: '年龄只能输入数字'},
		]
	}
}
const dynamicRules = {
	email: {
		rules: [
			{required: true, errorMessage: '域名不能为空'}, 
			{format: 'email', errorMessage: '域名格式错误'},
		]
	}
}

function submit(refName) {
	const refObj = {
		'valiFormRef': valiFormRef,
		'dynamicFormRef': dynamicFormRef
	}
	refObj[refName].value.validate().then(res => {
		console.log('success', res)
		uni.showToast({title: `校验通过`})
	}).catch(err => {
		console.log('err', err);
	})
}
function addFormItem() {
	dynamicLists.value.push({
		label: '域名',
		rules: [{'required': true, errorMessage: '域名项必填'}],
		id: Date.now()
	})
}
function del(id) {
	let index = dynamicLists.value.findIndex(v => v.id === id)
	dynamicLists.value.splice(index, 1)
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
	
.example {
	padding: 15px;
	background-color: $bg-p;
}
</style>